<template>
    <div class="study-stats">
        <a-row :gutter="16">
            <a-col :span="8">
                <div class="stat-item">
                    <div class="stat-value">{{ totalStudies }}</div>
                    <div class="stat-label">总学习记录</div>
                </div>
            </a-col>
            <a-col :span="8">
                <div class="stat-item">
                    <div class="stat-value">{{ todayStudies }}</div>
                    <div class="stat-label">今日新增</div>
                </div>
            </a-col>
            <a-col :span="8">
                <div class="stat-item">
                    <div class="stat-value">{{ recentlyUpdated }}</div>
                    <div class="stat-label">最近更新</div>
                </div>
            </a-col>
        </a-row>
    </div>
</template>

<script setup lang="ts">
interface StudyStatsProps {
    totalStudies: number
    todayStudies: number
    recentlyUpdated: number
}

defineProps<StudyStatsProps>()
</script>

<style scoped>
.study-stats {
    padding: 8px 0;
}

.stat-item {
    text-align: center;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #1890ff;
}

.stat-label {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}
</style>